<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=0">
<head>
	<title>快快数据</title>
	<script src="js/vue.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="http://101.200.201.27/adm/rd/js/echarts.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/jquery.datatables.min.js"></script>
	<script src="js/md5.js"></script>
	<script src="https://unpkg.com/vue-easytable/umd/js/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="js/fn.js"></script>
	<script src="http://101.200.201.27/adm/rd/js/rd.js"></script>
	<script src="http://101.200.201.27/adm/rd/js/chart-options.js"></script>

	
	<link rel="stylesheet" type="text/css" href="css/flex.css">
	<link rel="stylesheet" type="text/css" href="css/normal.css">
	<link rel="stylesheet" href="https://unpkg.com/vue-easytable/umd/css/index.css"> 
</head>
<style>

	.container { position: absolute; width: 96%; margin-left: 2%; background-color: #fff; height: 600px;  }
	header { width: 100%; height: 90px; }
	header .logininfo { width: 60%; text-align: right; }
	.logininfo span { font-size: 16px; font-weight: 200px; color: darkorange;}
	.logininfo button { width: 80px; min-width: 60px; font-size: 14px; background: none; border: none; cursor: pointer;  }
	.logininfo button:hover { color: red; }
	.mainTitle { width: 100%; margin: 20px; font-size: 48px; color: darkorange; text-shadow: 1px 1px 3px #333; font-weight: bolder; }
	nav { width: 100%; height: 36px; line-height: 36px; background-color: #ccc; display: flex; justify-content: flex-start; align-items: center; }
	
	nav button { background: none; border: none; width: 100px; cursor: pointer; margin: 0 5px; }
	/*nav button:hover { color: red; }*/
	nav button.choosed { color: darkorange; font-weight: bolder;}
	main { width: 100%; margin-top: 30px;    }
	footer { width: 100%; height: 40px; }

	@media (min-width: 1366px){
		.container { position: absolute; width: 1366px; left: 50%; margin-left: -683px; }
	}	
</style>
<body>
	<div class="container">
		<div id="index_vm">
			<header class="flex_rr">
				<div class="mainTitle">快快数据统计</div>
				<div class="logininfo" v-show="showUserInfo">
					<span class="username">{{userlogin.userName}}</span>
					<button class="changepassword" @click="loadpages('login', 'changepassword')">修改密码</button>
					<button class="logout" @click="loadpages('login', 'login')">退出登录</button>
					<button class="operation_users" v-if="isAdmin" @click="loadpages('login', 'operation_users')">用户管理</button>
				</div>
			</header>
			<nav>
				<span v-for="item in mainmenu"><button :class="'nav' + (curpage == item.value ? ' choosed' : '')" @click="loadpages('pages', item.value)">{{item.name}}</button>|</span>
			</nav>
		</div>
		<main></main>
		<footer></footer>
	</div>
</body>
</html>
<script>
	// 在首页定义全局公共变量
	var dataDomain = "http://101.200.201.27/adm/kkdata/kap/"; // 后端数据接口host

	// 本项目公共函数：跳转
	function navito(path, filename){
		var fname = path + "/" + filename + ".html"
		$("main").load(fname, function(){
			// console.log(fname)
		})
	}

	var mainmenu = [
		{name: '健康贡献', value: 'incomes'},
		{name: '预约统计', value: 'ty_classes'},
		{name: '用户画像', value: 'users'},
		{name: '业绩查询', value: 'iv'},
	];

	var index_vm = new Vue({
		el: '#index_vm',
		data: {
			mainmenu: [],
			userlogin: {userName: ""},
			showMenu: false,
			showUserInfo: false,
			isAdmin: false,
			curpage: ""
		}, 
		methods: {
			loadpages(path, filename){ 
				this.curpage = filename;
				navito(path, filename);
			}
		},
		mounted(){
			// 未登录，则进入登录页，不需初始化Vue结构
			if(! sessionStorage["userlogin"]){ 
				navito("login", "login");
			}else{
				this.userlogin = JSON.parse(sessionStorage["userlogin"]);
				this.showUserInfo = true;
				if(this.userlogin.user_type == 11 || this.userlogin.user_type == 12){
					// 然后直接引导至体验课预约页面
					navito("pages", "ty_classes");
				}else{
					this.mainmenu = mainmenu;
				}
				// 是否是管理员
				if(this.userlogin.user_type == 1){
					this.isAdmin = true;
				}
			}
		}
	})


</script>

<!-- <script src="js/auto_update_datas.js"></script> -->
